<template>
    <div id="wrapper" class="pb-150">

<div class="fixedFill-mx"></div>
   <div class="seller-list">
         <!--风控警告提示 mt-97  -->
        <FkRemind class="Mmt-96"></FkRemind>
        <div :class="mt60">
            <ul class="tab-nav">
                <li class="fl border-bottom f30" :class="{'active':operator == 1}" @click="selectClient(1)"><a class="nav-01 color-666" >商品管理</a></li>
                <li class="fl border-bottom f30" :class="{'active':operator == 2}" @click="selectClient(2)"><a class="nav-02 color-666">订单管理</a></li>
            </ul>
        </div>

    <div class="seller-01 " v-if="operator === 1">
        <div class="mobile-order-tips py-20 px-30 mb-20 bg-fffdf4" v-if="tips1">
            <i class="fl icon-close-yellow" @click="closeTips1"></i>
            <p class="ml-20 fl f26 ">电脑版发布商品暂未同步至手机版，如需查看，请登录电脑版查询</p>
            <a class="fr text-center f26" href="http://trading.5173.com/list/viewmybizofferslist2.aspx">去电脑版</a>
        </div>
        <div class="sliconn mb-20 border-top">
            <router-link :to="{name:'SellerGoodsListOfMobile',query:{status:0,operator:operator}}">
             <div class="selist-manage f30 color-000 px-30 text-b bg-faf">
                <span>手机端发布的商品</span><i class="rightico"></i>
             </div>
             </router-link>
            <div class="selist-tegory bg-fff border-bottom border-top py-30">
                <ul>
                    <li class="fl">
                        <router-link :to="{name:'SellerGoodsListOfMobile',query:{status:0,operator:operator}}">
                        <div class="gory-main border-right">
                            <span class=" fontarial f40 color-333 pb-10 fontbold">{{mobileGoodsCount.numInAuditor}}</span>
                            <p class="f26 color-666">审核中</p>
                        </div>
                        </router-link>
                    </li>
                    <li class="fl">
                        <router-link :to="{name:'SellerGoodsListOfMobile',query:{status:1,operator:operator}}">
                        <div class="gory-main border-right">
                            <span class=" fontarial f40 color-333 pb-10 fontbold">{{mobileGoodsCount.numInTrading}}</span>
                            <p class="f26 color-666">在售中</p>
                        </div>
                        </router-link>
                    </li>
                    <li class="fl">
                        <router-link :to="{name:'SellerGoodsListOfMobile',query:{status:4,operator:operator}}">
                        <div class="gory-main border-right">
                            <span class=" fontarial f40 color-333 pb-10 fontbold">{{mobileGoodsCount.numInSold}}</span>
                            <p class="f24 color-666">已卖出</p>
                        </div>
                        </router-link>
                    </li>
                    <li class="fl">
                        <router-link :to="{name:'SellerGoodsListOfMobile',query:{status:2,operator:operator}}">
                        <div class="gory-main">
                            <span class=" fontarial f40 color-333 pb-10 fontbold">{{mobileGoodsCount.numInOffline}}</span>
                            <p class="f24 color-666">已下架</p>
                        </div>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
       <div class="sliconn mb-20 border-top">
            <router-link :to="{name:'SellerGoodsListOfPc',query:{status:0,operator:operator}}">
            <div class="selist-manage f30 color-000 px-30 text-b bg-faf">
                    <span>手游商品</span>
                    <i class="rightico"></i>
                </div>
            </router-link>
            <div class="selist-tegory bg-fff border-bottom border-top py-30">
                <ul>
                    <li class="fl">
                        <router-link :to="{name:'SellerGoodsListOfPc',query:{status:0,operator:operator}}">
                        <div class="gory-main border-right">
                            <span class=" fontarial f40 color-333 pb-10 fontbold">{{pcGoodsCount.numInAuditor}}</span>
                            <p class="f26 color-666">审核中</p>
                        </div>
                        </router-link>
                    </li>
                    <li class="fl">
                        <router-link :to="{name:'SellerGoodsListOfPc',query:{status:1,operator:operator}}">
                        <div class="gory-main border-right">
                            <span class=" fontarial f40 color-333 pb-10 fontbold">{{pcGoodsCount.numInTrading}}</span>
                            <p class="f26 color-666">在售中</p>
                        </div>
                        </router-link>
                    </li>
                    <li class="fl">
                        <router-link :to="{name:'SellerGoodsListOfPc',query:{status:4,operator:operator}}">
                        <div class="gory-main border-right">
                            <span class=" fontarial f40 color-333 pb-10 fontbold">{{pcGoodsCount.numInSold}}</span>
                            <p class="f24 color-666">已卖出</p>
                        </div>
                        </router-link>
                    </li>
                    <li class="fl">
                        <router-link :to="{name:'SellerGoodsListOfPc',query:{status:2,operator:operator}}">
                        <div class="gory-main">
                            <span class=" fontarial f40 color-333 pb-10 fontbold">{{pcGoodsCount.numInOffline}}</span>
                            <p class="f24 color-666">已下架</p>
                        </div>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="seller-01 " v-if="operator === 2">
        <div class="mobile-order-tips py-20 px-30 mb-20 bg-fffdf4" v-if="tips2">
            <i class="fl icon-close-yellow" @click="closeTips2"></i>
            <p id="tips" class="ml-20 fl f26 ">卖家订单改版啦~~~游戏币、装备、帐号、手游订单都可以在这里查看啦~~~</p>
            <!-- <a class="fr text-center f26" href="http://trading.5173.com/list/myorder_manage.aspx">去电脑版</a> -->
        </div>
      <div class="sliconn mb-20 border-top">
            <router-link :to="{name:'SellerOrderCenter',query:{status:0,operator:operator}}">
                <div class="selist-manage f30 color-000 px-30 text-b bg-faf">
                    <span>卖家订单</span>
                    <i class="rightico"></i>
                </div>
            </router-link>
            <div class="selist-tegory bg-fff border-bottom border-top py-30">
                <ul>
                    <li class="fl">
                        <router-link :to="{name:'SellerOrderCenter',query:{orderstatus:'',operator:operator}}">
                            <div class="gory-main border-right">
                                <span class=" fontarial f40 color-333 pb-10 fontbold" v-text="allNum.total"></span>
                                <p class="f26 color-666">全部</p>
                            </div>
                        </router-link>
                    </li>
                    <li class="fl">
                       <router-link :to="{name:'SellerOrderCenter',query:{orderstatus:'0',operator:operator}}">
                        <div class="gory-main border-right">
                            <span class=" fontarial f40 color-333 pb-10 fontbold">{{allNum.prepay}}</span>
                            <p class="f24 color-666">待付款</p>
                        </div>
                        </router-link>
                    </li>
                    <li class="fl">
                       <router-link :to="{name:'SellerOrderCenter',query:{orderstatus:'1|2',operator:operator}}">
                        <div class="gory-main border-right ">
                            <span class=" fontarial f40 color-333 pb-10 fontbold">{{allNum.indeal}}</span>
                            <p class="f26 color-666">交易中</p>
                        </div>
                        </router-link>
                    </li>
                    <li class="fl">
                        <router-link :to="{name:'SellerOrderCenter',query:{orderstatus:3,operator:operator}}">
                        <div class="gory-main">
                            <span class=" fontarial f40 color-333 pb-10 fontbold">{{allNum.canceled}}</span>
                            <p class="f26 color-666">交易完成</p>
                        </div>
                        </router-link>
                    </li>

                </ul>
            </div>
        </div>

    </div>
</div>

</div>
</template>
<script type="text/javascript">
    import { mapState, mapGetters, mapActions } from 'vuex';
    import {BuyerCenterApi} from 'api/index';
     import FkRemind from 'components/common/FkRemind';
    export default {
        data(){
            return{
                operator:1,
                goodsStatus:1,
                tips1:true,
                tips2:true,
                orderNum:{},
                 
                mt60:'sellnage-nav tab websellnv mt-90',
            }
        },
        components:{
            FkRemind
        },
        created:function  () {
            let vm = this;
            vm.$bus.emit('headerText', "我是卖家");
            // if (!vm.$CONSTANTS.isLogin) {
            //     location.href='/vue/login?returnUrl='+ encodeURIComponent(location.href);
            // };
            vm.getCountList();
            vm.getPcCountList();
            if(localStorage.orderNum){
                vm.orderNum = JSON.parse(localStorage.orderNum)
                vm.getorderNum()
            }else {
                vm.getorderNum()

            }
            console.log(localStorage.orderNum)
        },
        beforeRouteEnter (to, from, next){
        if (from.query.operator) {
            next(vm=>{
                vm.operator = parseInt(from.query.operator);
            });
         }else{
            next();
        }

        },
         mounted:function(){
            let vm = this;
            vm.$bus.emit('isBack',false);
            vm.$bus.emit('callback',()=>{
                window.location.href='/vue/center'
            });
            vm.$bus.emit('isMore',true);
        },
        computed: {
             allNum(){
               return this.orderNum
             },
            ...mapState({
                mobileGoodsCount: state => {
                    return state.memberSeller.mobileGoodsCount;
                },
                pcGoodsCount:state =>{
                    return state.memberSeller.pcGoodsCount;
                },
                mobileOrderCount:state =>{
                    return state.orderMange.mobileOrderCount;
                }
                ,
                pcOrderCount:state =>{
                    return state.orderMange.pcOrderCount;
                }
            })
        },
        methods:{
            
            selectClient:function  (val) {
                let vm = this;
                vm.operator = val;
            },
            closeTips1(){
                this.tips1 = false
            },
            closeTips2(){
                this.tips2 = false
            },
            getorderNum(){
                var vm = this;
                BuyerCenterApi.getOrderList(
                    {
//                status: this.$route.query.status,
                        orderstatus:"",
                        tradingtype:'',
                        keywords:'',
                        pageindex:1,
                        pagesize:10,
                        usertype:0,
                        sourcetype :2
                    }
                ).then(res=>{
                    vm.orderNum.total = res.data.Data.OrderPages.TotalCount
                    BuyerCenterApi.getOrderList(
                        {
//                status: this.$route.query.status,
                            orderstatus:0,
                            tradingtype:'',
                            keywords:'',
                            pageindex:1,
                            pagesize:10,
                            usertype:0,
                            sourcetype :2
                        }
                    ).then(res=>{
                        vm.orderNum.prepay = res.data.Data.OrderPages.TotalCount
                        BuyerCenterApi.getOrderList(
                            {
//                status: this.$route.query.status,
                                orderstatus:"1|2",
                                tradingtype:'',
                                keywords:'',
                                pageindex:1,
                                pagesize:10,
                                usertype:0,
                                sourcetype :2
                            }
                        ).then(res=>{
                            vm.orderNum.indeal = res.data.Data.OrderPages.TotalCount
                            BuyerCenterApi.getOrderList(
                                {
//                status: this.$route.query.status,
                                    orderstatus:3,
                                    tradingtype:'',
                                    keywords:'',
                                    pageindex:1,
                                    pagesize:10,
                                    usertype:0,
                                    sourcetype :2
                                }
                            ).then(res=>{
                                vm.orderNum.canceled = res.data.Data.OrderPages.TotalCount
                                localStorage.setItem('orderNum',JSON.stringify(vm.orderNum))
                            })
                        })
                    })
                })
            },
            ...mapActions({
                getCountList:'member/MEMBER_SELLER_COUNT_LIST',
                getPcCountList:'member/MEMBER_SELLER_ORDER_COUNT_LIST'
            })
        }
    }
</script>
<style src="css/common/member-cxy.css" ></style>

<style scoped>
     .fixedFill-mx {
        width: 100%;
        height: .96rem;
    }
     /* 风控警告提示 */
.mt-60{margin-top: .6rem;}
.mt-90{margin-top: .7744rem;}
.notice_top{position:fixed;width:100%;border-bottom: .01rem solid #e8e8e8;}
.icon1_style{display: none}
.notice_risk{height: auto;display: block;overflow: hidden;background-color: #fffdf4;}
.notice_risk .icon_notice{background: url('~images/seller/notice_no.png') center center no-repeat;width:.3rem;height:.78rem;line-height:.78rem;background-size:.3rem;display:inline-block;margin-right:.1rem;} 
.notice_risk .notice_wz{line-height: .38rem;padding: .2rem 0rem .2rem 0rem;color: #be8600;} 
.notice_risk .notice_public{padding:.2rem 0 .2rem 0;width:95%;}
.notice_risk .notice_public p{height:.35rem;line-height:.35rem;color: #be8600;overflow:hidden;}
.notice_risk .icon_down{background: url('~images/seller/icon_down.png') center center no-repeat;width:.24rem;height:.75rem;line-height:.75rem;background-size:.24rem;display:inline-block;float:right;}
.notice_risk .icon_up{background: url('~images/seller/icon_up.png') center center no-repeat;width:.24rem;height:.75rem;line-height:.75rem;background-size:.24rem;display:inline-block;float:right;}  

</style>
